<div>
    <nz-space [nzSize]="'small'">
        <input *nzSpaceItem nz-input placeholder="请输入姓名" [(ngModel)]="qryParam!.empName"
            [ngModelOptions]="{standalone: true}" nz-button nzType="default" nzSize="default" />
        <button *nzSpaceItem nz-button nzType="primary" (click)="search()">
            <i nz-icon nzType="search"></i>
            查询
        </button>
    </nz-space>
    <nz-space [nzSize]="'small'">
        <button *nzSpaceItem nz-button nzType="primary" (click)="addModal()">
            <i nz-icon nzType="user-add"></i>
            新增
        </button>

    </nz-space>
</div>
<nz-table #nzTable [nzData]="emps" nzTableLayout="fixed" [nzFrontPagination]="false" [nzPageSize]="pageSize"
    [nzPageIndex]="pageIndex" [nzTotal]="total" nzShowSizeChanger (nzQueryParams)="onQueryParamsChange($event)"
    [nzBordered]="true" [nzTitle]="'员工信息'" [nzPageSizeOptions]="[ 1, 2,4,8 ]" [nzShowQuickJumper]="true"
    [nzShowPagination]="true" [nzShowTotal]="totalTemplate">
    <thead>
        <tr>
            <th nz-col="100"> id</th>
            <th>员工名称</th>
            <th>性别</th>
            <th>邮件地址</th>
            <th nzRight>操作</th>
        </tr>
    </thead>
    <tbody *ngIf="nzTable.data">
        <tr *ngFor="let data of nzTable.data">
            <td>{{ data.empId }}</td>
            <td>{{ data.empName }}</td>
            <td>{{ data.gender | sex }}</td>
            <td>{{ data.email }}</td>
            <td nzRight><button nz-button nzType="primary" nzSize="small"
                    (click)="createDetailModal(data.empId)">详情</button>
                <button nz-button nzType="primary" nzSize="small"
                    (click)="createUpdateComponentModal(data.empId)">修改</button>
                <button nz-button nzType="primary" nzSize="small" (click)="delete(data.empId)">删除</button>
            </td>
        </tr>
    </tbody>
</nz-table>

<ng-template #totalTemplate let-total>共{{ total }}条</ng-template>